const user_enroll_enrollment = {
    template:`
                <div>
                <h3 class="py-4">Look Up Your Enrollments</h3>
                <div class="input-group">
                    <input class="form-control search-input" placeholder="Email Address" v-model="form.email">
                    <input class="form-control search-input" placeholder="Phone Number" v-model="form.phone">
                    <button class="btn btn-primary">Search</button>
                </div>
                <div class="mt-4">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>Event Name</th>
                            <th>Event Photo</th>
                            <th>Event Date</th>
                            <th>Firstname</th>
                            <th>Lastname</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in events" :key="index">
                            <td>{{item.event.name}}</td>
                            <td><img :src="item.event.photo" class="enrollments-list-image"></td>
                            <td>{{item.event.date}}</td>
                            <td>{{item.firstname}}</td>
                            <td>{{{{item.lastname}}}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
    `,
    data() {
        return {
            events:null,
            form:{
                eamil:null,
                phone:null
            }
        };
    },
    methods:{
        search(){
            ajax.get(`enroll/${this.form.email}/${this.form.phone}`).then(res=>{
                if (res.status === 200){
                    this.events = res.data.data;
                }
            })
        }
    }
}